<template>
  <div class="layout">
    <!-- 左侧导航栏 -->
    <div class="left-nav">
      <div class="nav-title">
        <span class="nav-text">分组管理</span>
        <el-tooltip content="添加分组">
          <el-icon color="#FF6B00" @click="addGrouping()"><plus /></el-icon>
        </el-tooltip>
      </div>
      <div class="groups block">
        <el-input class="search_group" v-model="filterText" placeholder="输入分组" />
        <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :default-expand-all="true"
        >
          <template #default="{ node, data }">
            <el-tooltip placement="right" effect="light">
              <template #content>
                <el-link
                  class="link-text"
                  :underline="false"
                  type="primary"
                  @click="addGrouping(1, data)"
                  >添加子分组</el-link
                ><br />
                <el-link
                  class="link-text"
                  :underline="false"
                  type="primary"
                  @click="addSub(2, data)"
                  >编辑</el-link
                ><br />
                <el-link
                  class="link-text"
                  :underline="false"
                  type="primary"
                  @click="delDepart(data)"
                  >删除</el-link
                ><br />
                <!-- <el-link class="link-text" :underline="false" type="primary" v-show="data.is_local">同步至企微</el-link> -->
              </template>
              <div
                class="hover-text"
                @mouseover="mouseOver(data)"
                @mouseleave="mouseLeave(data)"
              >
                <div :class="selectId == data.id ? 'hover-detail-color' : 'hover-detail'">
                  {{ data.label }}
                </div>
                <!-- <span>{{ node.label }}</span> -->
                <el-icon color="#FF6B00" class="hover-icon" v-show="data.showEdit"
                  ><more-filled
                /></el-icon>
              </div>
            </el-tooltip>
          </template>
        </el-tree>
      </div>
    </div>

    <!-- 添加分组 -->
    <Dialog :appDialog="appDialog" v-show="isShowGrouping">
      <el-form
        ref="ruleFormRef"
        :model="addGroupingForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
      >
        <el-form-item label="选择分组" prop="selectGroup">
          <el-select v-model="addGroupingForm.selectGroup" placeholder="默认分组">
            <el-option
              v-for="item in data[0].children"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="addGroupingForm.name"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, getCurrentInstance } from "vue";
import type { ElTree } from "element-plus";
import Dialog from "@/components/Dialog.vue";
interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}
const isShowGrouping = ref(false);
const selectId = ref(0);
const filterText = ref(""); // 搜索分组
const showEdit = ref(false); //是否展示部门编辑
// 取消按钮
const cancelHandel = () => {
  console.log(appDialog.visible, "===");
  appDialog.visible = false;
};
// 保存按钮
const submitHandel = () => {};
// 弹框相关配置
const appDialog = reactive({
  visible: false,
  title: "添加分组",
  width: "700px",
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: "取消",
  submitText: "保存",
});
// 添加分组表单
const addGroupingForm = reactive({
  selectGroup: 4, // 选择分组
  name: "", // 添加分组名称
});
// 添加分组校验规则
const rules = reactive({
  selectGroup: [
    {
      required: true,
      message: "请选择分组",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "请填写分组名称",
      trigger: "blur",
    },
  ],
});
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: "children",
  label: "label",
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
// 搜索分组
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
// 分组 tree
const data: Tree[] = [
  {
    id: 1,
    label: "全部分组(1650)",
    children: [
      {
        id: 4,
        label: "默认分组(100)",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
      {
        id: 2,
        label: "分组名A(450)",
        children: [
          {
            id: 5,
            label: "Level two 2-1",
          },
          {
            id: 6,
            label: "Level two 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "分组名B(200)",
        children: [
          {
            id: 7,
            label: "Level two 3-1",
          },
          {
            id: 8,
            label: "Level two 3-2",
          },
        ],
      },
    ],
  },
];

//鼠标移入
const mouseOver = (data: any) => {
  data.showEdit = true;
};
//鼠标移出
const mouseLeave = (data: any) => {
  data.showEdit = false;
};
// 控制分组管理弹框
const addGrouping = () => {
  appDialog.visible = true;
};
console.log(getCurrentInstance);
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  .left-nav {
    width: 270px;
    box-sizing: border-box;
    // height: 600px;
    border: 1px solid #eaeaea;
    background-color: #ffffff;
    padding: 16px;
    margin-right: 16px;
    box-shadow: 0px 0.5px 10px rgba(0, 0, 0, 0.2);
    .nav-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .nav-text {
      font-size: 16px;
      font-weight: 600;
      color: #33302d;
    }
    .nav-input {
      width: 238px;
      padding: 16px 0 20px 0;
    }
    .el-tree-node__content {
      height: 35px !important;
    }
    .hover-text {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .hover-detail {
        color: #535456;
        font-size: 14px;
      }
      .hover-detail-color {
        color: #ff6b00;
      }
      .hover-detail:hover {
        color: #ff6b00;
      }
      .hover-icon {
        transform: rotate(90deg);
      }
    }
    .search-list {
      display: flex;
      flex-direction: column;
      .search-detail {
        margin: 0;
        color: #33302d;
      }
      .search-detail:hover {
        background-color: #f5f7fa;
      }
      .hover-text {
        line-height: 35px;
      }
    }
    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      .nodata-img {
        margin: 30px 0 30px 15px;
        width: 150px;
        height: 120px;
      }
    }
    .groups {
      color: #33302d;
      font-size: 14px;
      .search_group {
        margin: 20px 0;
      }
      :deep .el-tree-node__expand-icon {
        color: #ff6b00;
      }
      :deep .el-tree-node__content:hover {
        background: #fffaf9;
      }
      :deep .el-tree {
        --el-tree-node-hover-bg-color: #fffaf9;
      }
    }
    :deep.el-popper {
      text-align: center !important;
    }
  }
}
</style>
